<template>
	<view class="pb20">
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="cu-list menu-avatar" :class="'bg-' + theme.backgroundColor">
			<view class="padding-top-xs">
				<view class="flex padding-lr-lg">
					<view class="flex-treble flex">
						<view
							class="cu-avatar round xl flex solids"
							:style="
								userInfo.headimgUrl ? 'background-image:url(' + userInfo.headimgUrl + ')' : ''
							"
							 @click.stop="goPlay"
							>
							{{ !userInfo.headimgUrl ? "头" : "" }}
						</view>
						<view class="content margin-left margin-top-sm">
							<view class="flex align-center">
								<view class="text-white text-bold text-xl" v-if="userInfo.nickName">
									{{ userInfo.nickName || "点击登录" }}
								</view>
								<view class="ml32" @click.stop="goPage('/pages/user/user-info/index')">
									<view class="update-info">更新昵称</view>
									<!--  #ifndef H5 -->
									<!-- <view >
										<image class="update-image"
											src="../../../static/public/img/user-center/update-image.png"></image>
									</view> -->
									<!--  #endif -->
									<!--  #ifdef  H5 -->
									<!-- <view @click.stop="updateUserInfo" >
										<image class="update-image"
											src="../../../static/public/img/user-center/update-image.png"></image>
									</view> -->
									<!--  #endif -->
								</view>
							</view>
							<view class="text-white margin-top-xs" v-if="userInfo.phone">{{
								userInfo.phone
							}}</view>
						</view>
					</view>
					<!-- <view class="cuIcon-qrcode flex align-center f40"
						@tap.stop="$goUrl('/pages/user/user-barcode/index')"></view> -->
				</view>
				<view class="account cu-list menu card-menu margin-top margin-bottom-xl">
					<view v-if="userInfo">
						<!-- <view class="flex flex-sub flex-direction">
							<view class="text-xl text-bold">{{ userInfo.userCode }}</view>
							<view class="margin-top-xs flex align-center justify-center">
								<text class="cuIcon-vip"></text>
								<text class="margin-left-xs text-sm">{{ userInfo.userGrade == '0' ? '用户' : '会员' }}编号</text>
							</view>
						</view> -->
						<view
							class="flex text-center text-white align-center margin-bottom"
							v-if="userInfo.tzFlag == '0'">
							<view
								class="flex flex-sub flex-direction"
								v-for="(item, index) in userInfoBarList"
								:key="index"
								@tap="goBarpage(item)">
								<view class="text-xl text-bold">{{ userInfo[item.prop] || 0 }}</view>
								<view class="margin-top-xs flex align-center justify-center">
									<text class="margin-left-xs text-sm">{{ item.label }}</text>
								</view>
							</view>
						</view>
						<!-- <view class="flex text-center text-white align-center margin-bottom" v-else>
							<view
								class="flex flex-sub flex-direction"
								v-for="(item, index) in tzInfoBarList"
								:key="index"
								@tap="goBarpage(item)">
								<view class="text-xl text-bold">{{ userInfo[item.prop] || 0 }}</view> 
								<view class="margin-top-xs flex align-center justify-center">
									<text class="margin-left-xs f40">{{ item.label }}</text>
								</view>
							</view>
						</view> -->

						<!-- <navigator
							class="flex flex-sub flex-direction"
							url="/pages/user/user-points-record/index"
							hover-class="none">
							<view class="text-xl text-bold">{{ userInfo.pointsCurrent || 0 }}</view>
							<view class="margin-top-xs flex align-center justify-center">
								<text class="margin-left-xs text-sm">积分</text>
							</view>
						</navigator> -->
						<!-- <navigator class="flex flex-sub flex-direction" url="/pages/coupon/coupon-user-list/index"
							hover-class="none">
							<view class="text-xl text-bold">{{
                userInfo.couponNum ? userInfo.couponNum : 0
              }}</view>
							<view class="margin-top-xs flex align-center justify-center">
								<text class="margin-left-xs text-sm">优惠券</text>
							</view>
						</navigator> -->
					</view>
				</view>
				<!-- <image class="user-bg" src="http://minio.joolun.com/joolun/1/material/c73c49ba-9e7b-47de-bf95-c430fb6e1198.png"></image> -->
			</view>
		</view>
		<view class="cu-list padding-lr-sm" style="margin-top: -30px"> </view>
		<view class="cu-list padding-lr-sm margin-top-xs" v-if="userInfo.tzFlag != '0'">
			<view class="cu-bar bg-white" style="border-radius: 10rpx 10rpx 0rpx 0rpx">
				<view class="action">工具</view>
			</view>
			<view
				class="cu-list grid col-4 no-border"
				style="border-radius: 0rpx 0rpx 10rpx 10rpx"
				:style="'padding-bottom: ' + isIncrease + 'rpx;'">
				<template v-for="(item, index) in tools">
					<view class="cu-item" v-if="item.display" :key="index">
						<navigator :url="item.url" hover-class="none">
							<image :src="'../../../static/public/img/user-center/' + item.icon" class="item-img">
							</image>
							<text class="text-grey text-df">{{ item.label }}</text>
						</navigator>
					</view>
				</template>
			</view>
		</view>
		<!-- 提示：实际功能为退出当前账号，因为苹果上架App Store必须要删除账号功能，所以将 退出登录 文字改为 删除账号  -->
		<view
			class="text-red bg-white text-center margin-top margin-sm padding-sm radius mb50"
			style="margin-top: 120rpx"
			@click="logout">
			删除账号
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="margin-top flex justify-center text-sm" v-show="showPrivacyPolicy">
			<navigator
				class="text-blue text-sm"
				:url="'/pages/public/webview/webview?title=用户协议&url=' + protocolUrl">
				{{ " 用户协议 " }}
			</navigator>
			和
			<navigator
				class="text-blue text-sm"
				:url="'/pages/public/webview/webview?title=隐私政策&url=' + privacyPolicyUrl"
				>{{ " 隐私政策" }}
			</navigator>
		</view>
		<!-- #endif -->
		<!-- <view class="text-gray text-sm text-center margin-sm">www.joolun.com提供技术支持（{{ version }}）</view> -->
	</view>
</template>

<script>
const app = getApp();
import api from "utils/api";
import util from "utils/util";
import JimUtil from "@/utils/jim-util"; // IM工具库
import __config from "@/config/env"; // 配置文件Ω
import packagejson from "@/package.json";

export default {
	data() {
		return {
			CustomBar: this.CustomBar,
			theme: app.globalData.theme, //全局颜色变量
			userInfo: {},
			distributionConfig: null,
			orderCountAll: [],
			showPrivacyPolicy: __config.showPrivacyPolicy,
			privacyPolicyUrl: __config.privacyPolicyUrl,
			protocolUrl: __config.protocolUrl,
			canIUseGetUserProfile: false,
			version: packagejson.version,
			isWeiXinBrowser: util.isWeiXinBrowser(),

			//逻辑更改 之后控制display的值显示隐藏

			//积分 红包  优惠券 奖品
			tzInfoBarList: [
				// type 1 积分 2 红包 3 优惠券 4 奖品
				{
					label: "积分",
					prop: "pointsCurrent",
					url: "/pages/user/user-award-record/user-award-record?type=pointsCurrent",
				},
				{
					label: "红包",
					prop: "redPrice",
					url: "/pages/user/user-award-record/user-award-record?type=redPrice",
				},
				{
					label: "优惠券",
					prop: "couponNum",
					url: "/pages/user/user-award-record/user-award-record?type=couponNum",
				},
				{
					label: "奖品",
					prop: "prizeNum",
					url: "/pages/user/user-award-record/user-award-record?type=prizeNum",
				},
			],
			userInfoBarList: [
				// type 1 积分 2 红包 3 优惠券 4 奖品
				{
					label: "积分",
					prop: "pointsCurrent",
					url: "/pages/user/user-points-record/index?type=pointsCurrent",
				},
				{
					label: "红包",
					prop: "redPrice",
					url: "/pages/user/user-points-record/index?type=redPrice",
				},
				{
					label: "优惠券",
					prop: "couponNum",
					url: "/pages/user/user-points-record/index?type=couponNum",
				},
				{
					label: "奖品",
					prop: "prizeNum",
					url: "/pages/user/user-points-record/index?type=prizeNum",
				},
			],
			tools: [
				{
					label: "钱包",
					icon: "daifukuan.png",
					url: "/pages/purse/index",
					display: true,
				},
				{
					label: "积分",
					prop: "pointsCurrent",
					icon: "user-collect.png",
					url: "/pages/user/user-award-record/user-award-record?type=pointsCurrent",
					display: true,
				},
				{
					label: "红包",
					prop: "redPrice",
					icon: "user-distribution.png",
					url: "/pages/user/user-award-record/user-award-record?type=redPrice",
					display: true,
				},
				{
					label: "优惠券",
					prop: "couponNum",
					icon: "couponnum.png",
					url: "/pages/user/user-award-record/user-award-record?type=couponNum",
					display: true,
				},
				{
					label: "奖品",
					prop: "prizeNum",
					icon: "daishouhuo.png",
					url: "/pages/user/user-award-record/user-award-record?type=prizeNum",
					display: true,
				},
				{
					label: "数据查询",
					prop: "sjcx",
					icon: "sjcx.png",
					url: "/pages_code/pages/datareport/masters/index",
					display: true,
				},
				{
					label: "统计面板",
					prop: "tjmb",
					icon: "tjmb.png",
					url: "/pages_code/pages/livestatistics/index",
					display: true,
				},
				{
					label: "未领取红包回滚",
					prop: "prizeNum",
					icon: "user-article.png",
					url: "/pages/user/red-packet-rollback/index",
					display: true,
				},
				{
					label: "红包回滚记录",
					prop: "prizeNum",
					icon: "daipinglun.png",
					url: "/pages/user/rollback-record/index",
					display: true,
				},
				{
					label: "直播用户数据",
					prop: "prizeNum",
					icon: "daipinglun.png",
					url: "/pages/user/user-data/index",
					display: true,
				},
				{
					label: "直播团长数据",
					prop: "prizeNum",
					icon: "daipinglun.png",
					url: "/pages/user/tzUser-data/index",
					display: true,
				},
				{
					label: "直播和用户数据",
					prop: "prizeNum",
					icon: "daipinglun.png",
					url: "/pages/user/live-user-data/index",
					display: true,
				},
				{
					label: "已绑定用户",
					prop: "prizeNum",
					icon: "daipinglun.png",
					url: "/pages/user/bind-user/index",
					display: true,
				},
			],
		};
	},

	components: {},
	props: {},
	computed: {},
	onShow() {
		app.initPage().then((res) => {
			this.userInfoGet();
			// this.orderCountAllFun();
		});
		// 更新消息消息未读数
		// JimUtil.getJIMUnreadMsgCnt();
		//更新购物车tabar角标数量
		// uni.setTabBarBadge({
		// 	index: 2,
		// 	text: app.globalData.shoppingCartCount + "",
		// });
		// #ifdef MP-WEIXIN
		// app.doLogin()
		// #endif
	},

	onLoad(option) {
		// #ifdef MP-WEIXIN
		if (uni.getUserProfile) {
			this.canIUseGetUserProfile = true;
		}
		// #endif
		// #ifdef H5
		let code = option.code;
		let state = option.state;
		//授权code获取用户信息
		if (code && state == "snsapi_userinfo_update") {
			//有code
			this.userInfoUpdateByMp({
				jsCode: code,
				scope: state,
			});
		}
		// #endif
	},

	methods: {
		goBarpage(item) {
			this.$goUrl(item.url);
		},
		goPage(path) {
			if (path) {
				uni.navigateTo({
					url: path,
				});
			}
		},
		// #ifdef MP-WEIXIN
		agreeGetUser(e) {
			if (e.detail.errMsg == "getUserInfo:ok") {
				api.userInfoUpdateByMa(e.detail).then((res) => {
					this.userInfo = res.data;
					uni.setStorageSync("user_info", this.userInfo);
					this.userInfoGet();
				});
			}
		},

		getUserProfile(e) {
			// 该接口2022年10月25日后收回 https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01
			// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
			wx.getUserProfile({
				desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: (detail) => {
					api.userInfoUpdateByMa(detail).then((res) => {
						this.userInfo = res.data;
						uni.setStorageSync("user_info", this.userInfo);
						this.userInfoGet();
					});
				},
			});
		},
		// #endif
		// #ifdef H5
		updateUserInfo() {
			if (util.isWeiXinBrowser()) {
				//微信公众号H5，页面授权获取用户详情信息
				let appId = app.globalData.appId;
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				let route = currentPage.route;
				let redirectUri = location.href;
				let componentAppId_str = app.globalData.componentAppId
					? "&component_appid=" + app.globalData.componentAppId
					: "";
				redirectUri = encodeURIComponent(redirectUri);
				let wx_url =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
					appId +
					"&redirect_uri=" +
					redirectUri +
					componentAppId_str +
					"&response_type=code&scope=snsapi_userinfo&state=snsapi_userinfo_update#wechat_redirect";
				location.href = wx_url;
			}
		},
		//通过微信公众号网页授权更新用户信息
		userInfoUpdateByMp(parm) {
			let that = this;
			api
				.userInfoUpdateByMp(parm)
				.then((res) => {
					//公众号h5网页授权时url会产生code、state参数，防止code、state被复制，需自动剔除
					let query = that.$Route.query;
					delete query.code;
					delete query.state;
					util.resetPageUrl(query);
					this.userInfo = res.data;
					uni.setStorageSync("user_info", this.userInfo);
					this.userInfoGet();
				})
				.catch((res) => {});
		},
		// #endif
		//获取商城用户信息
		userInfoGet() {
			api.userInfoGet().then((res) => {
				this.userInfo = res.data;
			});
			//分销设置
			// api.distributionConfig().then((res) => {
			// 	this.distributionConfig = res.data;
			// });
		},

		orderCountAllFun() {
			api.orderCountAll().then((res) => {
				this.orderCountAll = res.data;
			});
		},
		// 去 apy页
		goPlay(){
			let appToken= uni.getStorageSync("appToken");
			if(appToken){
				let url = '/pages/payment/index';
				uni.navigateTo({
					url: url
				});
			}
		},
		logout() {
			uni.showModal({
				content: "确定删除账号吗？",
				cancelText: "我再想想",
				confirmColor: "#ff0000",
				success(res) {
					if (res.confirm) {
						api.logout().then((res) => {
							let userInfo = res.data;
							uni.setStorageSync("user_info", userInfo);
							if (userInfo) {
								uni.setStorageSync("third_session", userInfo.thirdSession);
							}
							//登出IM
							JimUtil.IMloginOut();
							//退出登录完成跳到首页
							uni.reLaunch({
								// url: "/pages/home/index",
								url: "/pages/login/index",
							});
							//清空购物车数量
							uni.setTabBarBadge({
								index: 2,
								text: "0",
							});
						});
					}
				},
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.user-bg {
	position: absolute;
	top: 180rpx;
	right: 30rpx;
	width: 248rpx;
	height: 248rpx;
	opacity: 0.2;
}

.item-img {
	width: 60rpx;
	height: 60rpx;
}

.update-image {
	width: 30rpx;
	height: 30rpx;
}

.signrecord {
	width: 140rpx;
	height: 52rpx;
}

.distribution-bg {
	border-radius: 20rpx 20rpx 0 0;
	background-color: #3b363a;
}

.distribution-image {
	width: 80rpx;
	height: 80rpx;
}

.distribution-center {
	border-radius: 20px;
	padding: 6rpx 16rpx;
	background-image: linear-gradient(to right, #faead0, #e9b59a);
	color: #42494d;
}

.activity-image {
	width: 100%;
	height: 130rpx;
	background-size: 100% 130rpx;
}

.update-info {
	border: 2rpx solid #ffffff30;
	font-size: 24rpx;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 48rpx;
	padding: 8rpx 16rpx;
}

.l-line {
	position: relative;
}

.l-line::before {
	content: " ";
	width: 2rpx;
	height: 32rpx;
	background: #f1f1f1;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -16rpx;
}

.icon-box {
	width: 48rpx;
	height: 48rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

</style>
